<template>
	<div class="container">
		<el-form>
			<el-row>
				<el-col :span ="12" class="hege_left">
					<el-form label-width="140px" label-position="left" style="margin-left:30px;">
						<h3>合格证打印</h3>
						<el-row style="margin-left:30px;margin-top:20px;">
							<el-form-item label="品牌logo">
								<el-upload
									class="upload-poster"
									action="https://jsonplaceholder.typicode.com/posts/"
									:show-file-list="false"
									:on-change="imgPreview"
									:auto-upload="false"
								>
									<img v-if="logo" :src="logo" class="avatar" />
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>jpg、png、gif格式，60x60像素，不超过2MB
							</el-form-item>
							<el-form-item label="食用农产品名称">
								<el-input v-model="ruleForm.productName" style="width:300px;"></el-input>
							</el-form-item>
							<el-form-item label="数量(重量)">
								<el-input v-model="ruleForm.surNum" style="width:300px;"></el-input>
							</el-form-item>
							<el-form-item label="生产者盖章或签名">
								<el-input v-model="ruleForm.company" style="width:300px;"></el-input>
							</el-form-item>
							<el-form-item label="联系方式">
								<el-input v-model="ruleForm.phone" style="width:300px;"></el-input>
							</el-form-item>
							<el-form-item label="产地">
								<el-input v-model="ruleForm.address" style="width:300px;"></el-input>
							</el-form-item>
							<el-form-item label="开具日期">
								<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="ruleForm.date"  style="width: 300px;"></el-date-picker>
							</el-form-item>
							<el-form-item label-width="300px" label="我承诺对产品质量安全以及合格证真实性负责"></el-form-item>
							<el-form-item label-width="0px">
								<el-checkbox-group v-model="ruleForm.checkList">
									<el-checkbox label="不使用禁限农药兽药" style="display:block;"></el-checkbox>
									<el-checkbox label="不使用非法添加物" style="display:block;"></el-checkbox>
									<el-checkbox label="遵守农药安全间隔期、兽药休药期规定" style="display:block;"></el-checkbox>
									<el-checkbox label="销售的食用农产品符合农药兽药残留食品安全国家标准" style="display:block;"></el-checkbox>
								  </el-checkbox-group>
							</el-form-item>
							<el-form-item label="打印数量">
								<el-input v-model="number" style="width:300px;"></el-input>
							</el-form-item>
						</el-row>
					</el-form>
				</el-col>
				<el-col :span ="10">
					<el-form style="padding-left:20px;">
						<h3>合格证预览</h3>
						<div   style="max-height: 400px; " >
							<div  style="page-break-after:always;position: relative;width:100%;margin:0;min-height:400px;zoom:1;display:block;font-size:12px;text-align: left;">
								
								<el-col class="hege_lr_top" style="font-size: 12px; font-weight: 600; margin-bottom: 20px; float:left; position: relative; display: block; width:100%;margin-top:30px;">
									 <img v-if="viewImg" src="../../../../assets/img/ceshilogo.png" style="vertical-align: middle; width: 55px; height: 55px; overflow: hidden;">
									 <img style="vertical-align: middle; width: 55px; height: 55px; overflow: hidden;" :src="logo" v-else>
									 <span style="margin-left: 5px; vertical-align: middle;font-size: 24px">食用农产品合格证</span>
								</el-col>
								<el-col class="hege_lr_list" style="float: left; position: relative; display: block;width:100%">
									<el-row style="position: relative; margin-left: 0; zoom: 1; display: block;">
										<el-col :span="14" style="float:left;display: block; width: 58.33333333%;">
											<ul style="padding:0; margin:0">
												<li style="list-style: none; line-height: 30px; font-size:14px">食用农产品名称：{{ruleForm.productName}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">数量(重量)：{{ruleForm.surNum}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">生产者盖章或签名：{{ruleForm.company}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">联系方式：{{ruleForm.phone}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">产地：{{ruleForm.address}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">开具日期：{{ruleForm.date}}</li>
											</ul>
										</el-col>
										
										<el-col class="bot" style="margin: 0 0 10px 0; float:left;display: block; width: 100%; font-size:14px">
											<p style="padding:0; margin:0">我承诺对产品质量安全以及合格证真实性负责</p>
											<ul style="padding:0; margin:0">
												<li style="list-style: none; line-height: 20px; font-size:12px; padding-left:14px" v-for="(item,index) in ruleForm.checkList" :key="index">✔ &nbsp;{{item}}</li>
											</ul>
										</el-col>
									</el-row>
								</el-col>
							</div>
						</div>
						<div id="printDiv" ref="printDom1" style="max-height: 400px; " v-show="ifshow">
							<div v-for="(item,index) in demolist" :key="index" style="page-break-after:always;position: relative;width:100%;margin:0;min-height:400px;zoom:1;display:block;font-size:12px;text-align: left;">
								
								<el-col class="hege_lr_top" style="font-size: 12px; font-weight: 600; margin-bottom: 20px; float:left; position: relative; display: block; width:100%;margin-top:30px;">
									 <img v-if="viewImg" src="../../../../assets/img/ceshilogo.png" style="vertical-align: middle; width: 55px; height: 55px; overflow: hidden;">
									 <img style="vertical-align: middle; width: 55px; height: 55px; overflow: hidden;" :src="logo" v-else>
									 <span style="margin-left: 5px; vertical-align: middle;font-size: 24px">食用农产品合格证</span>
								</el-col>
								<el-col class="hege_lr_list" style="float: left; position: relative; display: block;width:100%">
									<el-row style="position: relative; margin-left: 0; zoom: 1; display: block;">
										<el-col :span="14" style="float:left;display: block; width: 58.33333333%;">
											<ul style="padding:0; margin:0">
												<li style="list-style: none; line-height: 30px; font-size:14px">食用农产品名称：{{ruleForm.productName}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">数量(重量)：{{ruleForm.surNum}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">生产者盖章或签名：{{ruleForm.company}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">联系方式：{{ruleForm.phone}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">产地：{{ruleForm.address}}</li>
												<li style="list-style: none; line-height: 30px; font-size:14px">开具日期：{{ruleForm.date}}</li>
											</ul>
										</el-col>
										<el-col :span="10" style="float:left;display: block; width: 41.66666667%;">
											 <div ref="qrcode" class="xzimg"></div>
										</el-col>
										<el-col class="bot" style="margin: 0 0 10px 0; float:left;display: block; width: 100%; font-size:14px">
											<p style="padding:0; margin:0">我承诺对产品质量安全以及合格证真实性负责</p>
											<ul style="padding:0; margin:0">
												<li style="list-style: none; line-height: 20px; font-size:12px; padding-left:14px" v-for="(item,index) in ruleForm.checkList" :key="index">{{item}}</li>
											</ul>
										</el-col>
									</el-row>
								</el-col>
							</div>
						</div>
					</el-form>
				</el-col>
			</el-row>
			<el-form-item class="footerFixed" style="z-index:2000;">
				<el-button type="primary" @click="submitrule('ruleForm')">预览</el-button>
				<el-button @click="backPage">返回</el-button>
				<el-button type="primary" @click="save">打印</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	// import NPrint from '../../../../assets/nprint';
	import QRCode from 'qrcodejs2'
	import { sub_findPrintMsg,get_code } from "@/request/api"
	export default {
		data(){
			return{
				ifshow:false,
				number:'',
				ruleForm:{
					productName:'',
					surNum:'',
					checkList:[]
				},
				demolist:[
						
				],
				viewImg: true,
				logo:""
			}
		},
		mounted() {
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			backPage(){
				this.$router.go(-1)
			},
			init(){
				sub_findPrintMsg(this.id).then((res)=>{
					this.ruleForm.productName = res.data.productName
					this.ruleForm.surNum = res.data.spec + res.data.specUnits
					
				})
			},
			imgPreview(file,fileList){
				this.viewImg = false
			     this.logo =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			    if (regex.test(fileName.toLowerCase())) {
			        this.ruleForm.files = file.raw
			        this.ruleForm.logo = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			},
			submitrule(index){
				if(this.number == "" || this.number == null){
					this.$notify({
					    title: '提示',
					    message: '打印数量不能为空',
					    type: 'error',
					    duration:1000
					});
					return false
				}
				let data = {
					"食用农产品名称":this.ruleForm.productName,
					"数量(重量)":this.ruleForm.surNum,
					"生产者盖章或签名":this.ruleForm.company,
					"联系方式":this.ruleForm.phone,
					"产地":this.ruleForm.address,
					"开具日期":this.ruleForm.date
				}
				var content="{"
				for(var key in data){
					content+="\""+key+"\":"+"\""+data[key]+"\",";
				}
				content = content.substring(0,content.length-1)+"}";
				
				var list = {
					subpackageId:this.id,
					content:content,
					num:this.number,
					type:"合格证打印"
				}
				get_code(list).then((res)=>{
					this.demolist = res.data
					var protocol= window.location.protocol+'//';
					var host = window.location.host;
					for(var i=0;i<this.demolist.length;i++){
						this.demolist[i] = "http://grove.cpzsyun.com:81/scan/company.html?code=" +  this.demolist[i]
					}

					
					this.$nextTick(()=>{
						this.makecode()

					})

					
				})
			},
			save(){
				var _this = this
				_this.$print(this.$refs.printDom1)
			},
			makecode(){
				for(var i=0;i<this.demolist.length;i++){
					let qrcode = new QRCode(this.$refs.qrcode[i], {
				        width: 200,
				        height: 200, // 高度
				        text:this.demolist[i],// 二维码内容
					})
				}
			}
			
		}
	}
</script>

<style scoped>
	.xzimg{
	    margin:0 auto;
	    margin-left:80px;
	    width:200px;
	    height:200px;
	}
	@page{
	    size:  auto;   /* auto is the initial value */
	    margin: 3mm;  /* this affects the margin in the printer settings */
	  }
	 
	  html{
	    background-color: #FFFFFF;
	    margin: 0;  /* this affects the margin on the html before sending to printer */
	  }
	 
	  body{
	    border: solid 1px blue ;
	    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
	.hege_left{
		border-right:1px dashed #ccc;
		padding-right: 20px;
	}
	.hege_lr_top{
		font-size: 36px;
		font-weight: 600;
		margin-bottom: 36px;
	}
	.hege_lr_list{
		list-style: none;
		line-height: 38px;
	}
	.bot{
		margin-bottom:20px;
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    width:88px;
	    overflow: hidden;
	  }
	  
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  /deep/.el-upload--text{
	      width:90px;
		  height:80px;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 88px;
	    height: 78px;
	    line-height: 60px;
	    text-align: center;
	  }
	  .avatar {
	    width: 88px;
	    height: 78px;
	    display: block;
	  }
</style>
